import React from 'react'
import { Tabs } from 'antd'
import _ from 'lodash'
const { TabPane } = Tabs

const CommonTabs = ({
  options,
  defaultActiveKey = 1,
  Components = {},
  type = 'line',
  center = false,
}) => {
  const tabsProps = {
    type,
    defaultActiveKey,
    centered: center,
    // eslint-disable-next-line react/display-name
    renderTabBar: (props, DefaultTabBar) => <DefaultTabBar {...props} />,
  }

  return (
    <div>
      <Tabs {...tabsProps}>
        {_.map(options, (item, key) => {
          const Component = item.component ? Components[item.component] : ''

          return (
            <TabPane tab={item.title} key={item.id}>
              {Component && <Component />}
            </TabPane>
          )
        })}
      </Tabs>
    </div>
  )
}

export default CommonTabs
